البرمجة

إنشاء جدول أنيق باستخدام HTML و CSS

اخر تحديث 07/06/2025
16 تمت قراءة 5 دقيقة
جدول المحتوى

كيفية إنشاء جدول أنيق بـ HTML و CSS

تُعد الجداول من أهم العناصر المستخدمة في تصميم صفحات الويب، حيث توفر طريقة منظمة ومرتبة لعرض البيانات والمعلومات بشكل يسهل على المستخدم فهمها وتحليلها. ومع تطور تقنيات تصميم الويب، أصبح بالإمكان تحويل الجداول التقليدية إلى جداول أنيقة وجذابة باستخدام تقنيات HTML و CSS، مما يزيد من تفاعل المستخدمين مع المحتوى ويجعل تجربة التصفح أكثر احترافية.

في هذا المقال الموسع، سنتناول بالتفصيل كيفية إنشاء جدول أنيق باستخدام لغتي HTML و CSS، مع شرح مفصل لكل خطوة وأساليب التنسيق المختلفة التي يمكن تطبيقها لجعل الجدول مميزًا واحترافيًا. سنبدأ أولاً بفهم هيكل الجدول في HTML، ثم ننتقل إلى تنسيقه باستخدام CSS، مع تقديم أمثلة تطبيقية توضح كيفية تطبيق كل تقنية.

مواضيع ذات صلة

1. الهيكل الأساسي للجدول باستخدام HTML

لغة HTML هي الأساس الذي يُبنى عليه أي جدول في صفحات الويب. يتكون الجدول من عناصر رئيسية يجب معرفتها لفهم كيفية تنظيم البيانات بداخله.

عناصر الجدول الأساسية في HTML:

  • : العنصر الأساسي الذي يحتوي على الجدول بأكمله.

    • : الجزء الخاص برأس الجدول ويحتوي عادة على عناوين الأعمدة.

    • : جسم الجدول الذي يحتوي على الصفوف والبيانات.

    • : صف في الجدول (Table Row).

    • ,

    ,

    : خلية رأسية (Header Cell) تستخدم عادة لعناوين الأعمدة.

    		• : خلية بيانات عادية (Data Cell).

    مثال على جدول بسيط في HTML:

    html
    <table>
  <thead>
    <tr>
      <th>الاسمth>
      <th>العمرth>
      <th>المدينةth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>أحمدtd>
      <td>28td>
      <td>الرياضtd>
    tr>
    <tr>
      <td>سارةtd>
      <td>24td>
      <td>جدةtd>
    tr>
    <tr>
      <td>محمدtd>
      <td>30td>
      <td>الدمامtd>
    tr>
  tbody>
table>

    هذا الجدول يحتوي على ثلاثة أعمدة وثلاثة صفوف بيانات مع رأس الجدول.

    2. مبادئ تنسيق الجدول باستخدام CSS

    لتنظيم مظهر الجدول، نستخدم لغة CSS التي تمكننا من التحكم في ألوان الجدول، حدود الخلايا، تباعد النصوص، وحجم الخط، وغير ذلك. التصميم الجيد يعتمد على توازن الألوان، وضوح النص، وسهولة القراءة.

    أهم خصائص CSS المستخدمة في تنسيق الجداول:

    • border: لتحديد حدود الجدول والخلايا.

    • border-collapse: لتوحيد حدود الخلايا وعدم تكرارها.

    • padding: لتحديد المسافة بين محتوى الخلية وحدودها.

    • text-align: لمحاذاة النص داخل الخلايا (يمين، يسار، وسط).

    • background-color: لتلوين خلفية الصفوف أو الخلايا.

    • font-family, font-size, color: لتحديد شكل النص وحجمه ولونه.

    • hover effects: تأثيرات التمرير على الصفوف لزيادة تفاعل المستخدم.

    • width, max-width: لتحديد عرض الجدول.

    3. بناء جدول أنيق خطوة بخطوة

    الخطوة الأولى: تنسيق الحدود وتوحيدها

    بشكل افتراضي، تظهر حدود الجدول منفصلة، وهو ما قد يسبب مظهرًا غير مرتب. لإصلاح ذلك نستخدم خاصية border-collapse: collapse لجعل الحدود متماسكة:

    css
    table {
  border-collapse: collapse;
  width: 100%;
}

    تعيين عرض الجدول إلى 100% يجعل الجدول يمتد بعرض الحاوية التي يحتويها، مما يتيح مرونة في التصميم.

    الخطوة الثانية: إضافة حدود للخلايا ومسافات داخلية

    لجعل البيانات أكثر وضوحًا، نضيف حدودًا خفيفة مع مساحة داخلية مناسبة داخل الخلايا:

    css
    th, td {
  border: 1px solid #ddd;
  padding: 12px 15px;
  text-align: center;
}

    • اللون #ddd هو رمادي فاتح يضفي مظهرًا ناعمًا للحدود.

    • التباعد الداخلي padding يجعل النص لا يلتصق بالحدود.

    الخطوة الثالثة: تصميم رأس الجدول

    رأس الجدول هو الجزء الذي يحتوي على عناوين الأعمدة، لذا من المهم تمييزه عن باقي الصفوف:

    css
    thead {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

    • الخلفية الخضراء الداكنة مع النص الأبيض تعطي تباينًا واضحًا.

    • text-transform: uppercase يجعل النص بحروف كبيرة لزيادة الوضوح.

    الخطوة الرابعة: تأثير تمرير الماوس على الصفوف

    لزيادة تفاعل المستخدم، من المفيد إضافة تأثير بسيط عند مرور مؤشر الفأرة على صف من الجدول:

    css
    tbody tr:hover {
  background-color: #f1f1f1;
}

    يغير لون خلفية الصف إلى رمادي فاتح عند المرور عليه.

    الخطوة الخامسة: تحسين قابلية القراءة باستخدام تلوين الصفوف بالتناوب

    استخدام ألوان مختلفة للصفوف بالتناوب يساعد العين على تتبع البيانات بشكل أفضل، خاصة في الجداول الكبيرة.

    css
    tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}
tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

    4. مثال كامل لجدول أنيق

    بتجميع كل ما سبق، نحصل على الكود التالي:

    كود HTML:

    html
    <table>
  <thead>
    <tr>
      <th>الاسمth>
      <th>العمرth>
      <th>المدينةth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>أحمدtd>
      <td>28td>
      <td>الرياضtd>
    tr>
    <tr>
      <td>سارةtd>
      <td>24td>
      <td>جدةtd>
    tr>
    <tr>
      <td>محمدtd>
      <td>30td>
      <td>الدمامtd>
    tr>
  tbody>
table>

    كود CSS:

    css
    table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px 15px;
  text-align: center;
}

thead {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #f1f1f1;
}

    5. تحسينات إضافية لتصميم الجداول

    يمكن تطبيق عدد من التحسينات المتقدمة التي تزيد من جمالية وجدوى الجدول، مثل:

    5.1. جعل الجدول متجاوبًا (Responsive)

    في الهواتف المحمولة والأجهزة ذات الشاشات الصغيرة، قد يصعب عرض الجدول بعرض كامل، مما يؤدي إلى ظهور شريط تمرير أفقي أو اختناق النص. لجعل الجدول متجاوبًا، يمكن وضعه داخل عنصر div مع خاصية CSS تسمح بالتمرير الأفقي:

    css
    .table-wrapper {
  overflow-x: auto;
  margin: 20px 0;
}

    وبذلك يكون الجدول داخل:

    html
    <div class="table-wrapper">
  <table>...table>
div>

    5.2. تحسين الخطوط والمسافات

    استخدام خطوط واضحة وسهلة القراءة مع تكبير حجم الخط قليلاً يضيف وضوحًا للنصوص:

    css
    table {
  font-size: 16px;
  line-height: 1.5;
}

    5.3. إضافة تأثير الظل (Box Shadow)

    يمكن إضافة ظل خفيف للجدول ليبدو بارزًا واحترافيًا:

    css
    table {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

    5.4. تخصيص حدود الرأس والأعمدة

    لزيادة التباين يمكن تعيين حدود أكثر سمكًا للرأس أو لفصل الأعمدة:

    css
    th {
  border-bottom: 2px solid #3e8e41;
}

    5.5. تنسيق اتجاه النص للغات التي تكتب من اليمين لليسار

    عند التعامل مع لغات مثل العربية، من المهم ضبط اتجاه الجدول والنصوص:

    css
    table {
  direction: rtl;
  text-align: center;
}

    6. استخدام CSS Grid أو Flexbox لتصميم جداول بديلة

    مع تقدم تقنيات CSS، أصبح بالإمكان تصميم جداول مرنة باستخدام CSS Grid أو Flexbox لتجاوز بعض قيود الجدول التقليدي.

    مثال بسيط باستخدام CSS Grid:

    css
    .table-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background-color: #4CAF50;
}

.table-grid div {
  background-color: white;
  padding: 12px 15px;
  text-align: center;
}

.table-grid div.header {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

    HTML:

    html
    <div class="table-grid">
  <div class="header">الاسمdiv>
  <div class="header">العمرdiv>
  <div class="header">المدينةdiv>

  <div>أحمدdiv>
  <div>28div>
  <div>الرياضdiv>

  <div>سارةdiv>
  <div>24div>
  <div>جدةdiv>

  <div>محمدdiv>
  <div>30div>
  <div>الدمامdiv>
div>

    هذه الطريقة توفر تحكمًا أكبر في التصميم، لكنها قد تكون أقل ملاءمة للبيانات التي تحتاج إلى وظائف الجدول التقليدية مثل الفرز والبحث.

    7. دمج الخطوط والألوان مع العلامة التجارية للموقع

    للحصول على جدول أنيق ومتناسق مع هوية الموقع، يمكن تعديل الألوان والخطوط لتتلاءم مع تصميم الموقع العام. على سبيل المثال، إذا كانت ألوان الموقع تعتمد على درجات اللون الأزرق، يمكن تعديل الألوان كالتالي:

    css
    thead {
  background-color: #007BFF;
  color: white;
}

tbody tr:nth-child(even) {
  background-color: #E6F0FF;
}
tbody tr:hover {
  background-color: #CCE0FF;
}

    8. إضافة أيقونات أو أزرار داخل خلايا الجدول

    في بعض الحالات، يرغب المصمم في إدخال عناصر تفاعلية مثل أزرار، روابط، أو أيقونات في خلايا الجدول، مما يجعل الجدول أكثر ديناميكية.

    مثال:

    html
    <tr>
  <td>أحمدtd>
  <td>28td>
  <td>الرياضtd>
  <td><button class="btn-edit">تعديلbutton>td>
tr>

    تنسيق زر التعديل:

    css
    .btn-edit {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn-edit:hover {
  background-color: #45a049;
}

    9. الجدول والتوافق مع محركات البحث (SEO)

    على الرغم من أن الجداول تُستخدم عادة لعرض البيانات، إلا أن تنسيقها بشكل جيد باستخدام HTML القياسي (العناصر المناسبة مثل

    ) يساعد محركات البحث على فهم محتوى الصفحة بشكل أفضل. كما أن استخدام نصوص واضحة ووصفية داخل الخلايا يدعم تحسين ظهور الجدول في نتائج البحث.

    10. ملخص أهم النقاط في إنشاء جدول أنيق بـ HTML و CSS

    الخطوة الوصف
    بناء هيكل الجدول بـ HTML استخدام عناصر

    ,

    ,

    ,

    ,

    ,

    توحيد الحدود خاصية border-collapse: collapse لتوحيد حدود الخلايا
    تنسيق الخلايا إضافة حدود، تباعد داخلي، ومحاذاة النص
    تصميم رأس الجدول تلوين الخلفية، لون النص، وتنسيق الخط
    تلوين الصفوف بالتناوب لتحسين قابلية القراءة باستخدام nth-child
    تأثير التمرير تغيير لون الخلفية عند مرور الماوس لزيادة التفاعل
    جعل الجدول متجاوبًا استخدام overflow-x: auto في حاوية الجدول
    تحسين النصوص اختيار خطوط مناسبة وحجم نص واضح
    إضافة الظلال box-shadow لإضفاء عمق على الجدول
    دعم اتجاه النص استخدام direction: rtl للغات من اليمين لليسار

    11. المصادر والمراجع

    يُعد تصميم الجداول الأنيقة باستخدام HTML و CSS مهارة أساسية لمطوري الويب ومحترفي التصميم، حيث تجمع بين التنظيم الدقيق للبيانات والمظهر الجذاب الذي يعزز من تجربة المستخدم. من خلال تطبيق المبادئ والتقنيات السابقة، يمكن لأي مصمم أو مبرمج إنشاء جداول متقنة تتناسب مع أي نوع من المواقع الإلكترونية وتلبي احتياجات العرض المختلفة بشكل احترافي.

    اخر تحديث 07/06/2025
    16 تمت قراءة 5 دقيقة